<template>
  <el-dialog v-model="treeData.visible" title="添加特殊作业及人员" width="900">
    <div class="add-inner-user">
      <div class="type-select">
        <div>特殊作业：</div>
        <el-select placeholder="请选择" v-model="params.special">
          <el-option v-for="(item, index) in treeData.options1" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="title1">通过证件类型或资质/角色进行查询：</div>
      <div class="user-transfer">
        <div class="transfer-area">
          <div class="transfer-area-title">待选区</div>
          <div class="transfer-area-content">
            <div class="transfer-area-filter">
              <el-select placeholder="请选择" clearable :multiple="true" v-model="params.category" @change="categoryChange">
                <el-option v-for="(item, index) in treeData.options2" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="transfer-area-list">
              <el-tree ref="treeRef" :data="treeData.data" show-checkbox node-key="id" default-expand-all
                :default-expanded-keys="[]" :default-checked-keys="[]" :props="treeData.defaultProps"
                :filter-node-method="filterNode">
                <template #default="{ node, data }">
                  <span class="custom-tree-node" v-if="node.data.children && node.data.children.length">
                    <span>{{ node.label }}</span>
                  </span>
                  <span v-else>
                    <span>{{ node.label }}</span>
                    <span class="flag" v-for="(v, i) in node.data.cert" :key="i">{{ getName(v) }}</span>
                  </span>
                </template>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="transfer-operate">
          <el-button icon="CaretRight" type="primary" @click="toRight" />
          <el-button icon="CaretLeft" :disabled="!rightData.user1.length && !rightData.user2.length" type="primary"
            @click="toLeft" />
        </div>
        <div class="transfer-area">
          <div class="transfer-area-title">已选区</div>
          <div class="transfer-area-content">
            <div class="transfer-area-filter">
              <el-input placeholder="搜索已选人员姓名" prefix-icon="Search" v-model="filterData.key" />
            </div>
            <div class="transfer-area-list">
              <GroupUser title="登高证" :filterKey="filterData.key" :users="rightData.user1" @update="curChecked1" />
              <GroupUser title="动火证" :filterKey="filterData.key" :users="rightData.user2" @update="curChecked2" />
            </div>
            <div class="selected-total">
              共计已选：<span class="selected-total-num">{{ total }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div style="text-align:center">
        <el-button @click="treeData.visible = false">取消</el-button>
        <el-button type="primary" @click="treeData.visible = false">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import GroupUser from "./GroupUser.vue";
import { computed, onMounted, reactive, ref } from "vue";
import { getResource } from '@/api/resource'
import { ElMessage, ElTree } from 'element-plus'

interface Tree {
  [key: string]: any
}

const params = reactive({
  special: '',
  category: ''
})

let treeData = reactive<{
  options1: Array<any>,
  options2: Array<any>,
  [propsName: string]: any
}>({
  visible: false,
  data: [
    {
      id: 1,
      label: '机场集团内部员工',
      disabled: false,
      children: [{
        id: 4,
        label: '航站区管理部',
        disabled: false,
        children: [
          {
            id: 6,
            label: '航站区管理部',
            disabled: false,
            children: [{
              id: 9,
              label: '张科',
              disabled: false,
              cert: ['AscendHeight']
            }, {
              id: 10,
              label: '王卫国',
              disabled: false,
              cert: ['UseFire']
            },
            {
              id: 11,
              label: '赵立',
              disabled: false,
              cert: ['UseFire', 'AscendHeight']
            },
            ]
          },
          {
            id: 5,
            label: '电力站',
            disabled: false,
            children: [
              {
                id: 12,
                label: '马尚城',
                disabled: false,
                cert: ['AscendHeight']
              },
              {
                id: 13,
                label: '杜腾',
                disabled: false,
                cert: ['UseFire', 'AscendHeight']
              },
            ]
          }
        ]
      },
      ]
    },
  ],
  defaultProps: {
    children: 'children',
    label: 'label',
    disabled(data: any, node: any) {
      return data.disabled
    }
  },
  selectedUsers: [],
  options1: [],
  options2: [],
})
const getOptions = () => {
  getResource('SPECIAL_OPERATION_QUALIFI').then(res => {
    treeData.options1 = res.data.properties.meta
    treeData.options2 = treeData.options1.map(item => ({ label: item.label.replace('作业', '证'), value: item.value }))
  })
}

const rightData = reactive<{
  user1: Array<any>,
  user2: Array<any>
}>({
  user1: [], // 登高
  user2: [], // 动火
})

const treeRef = ref<InstanceType<typeof ElTree>>()

const getName = (value: string) => {
  return treeData.options2.filter(item => item.value == value)[0].label
}

const categoryChange = (value: string) => {
  treeRef.value!.filter(value)
}

const filterNode = (value: string, data: Tree) => {
  if (!value.length || (data.children && data.children.length)) return true
  if (value.length == 1) {
    return data.cert.includes(value[0])
  }
  return data.cert.includes(value[0]) || data.cert.includes(value[1])

}

const toRight = () => {
  rightData.user1 = []
  rightData.user2 = []
  let nodes = treeRef.value!.getCheckedNodes(true)
  if (!nodes.length) {
    return ElMessage.warning('请选择要移动的选项')
  }
  for (let i in nodes) {
    if (nodes[i].cert.includes('AscendHeight')) {
      rightData.user1.push(nodes[i])
      nodes[i].disabled = true
    }
    if (nodes[i].cert.includes('UseFire')) {
      rightData.user2.push(nodes[i])
      nodes[i].disabled = true
    }
  }
}

const selectedList = reactive<{
  list1: Array<any>,
  list2: Array<any>
}>({
  list1: [], // 登高证
  list2: [], // 动火证
})

const filterData = reactive({
  key: ''
})

const curChecked1 = (list: Array<any>) => {
  selectedList.list1 = list
}
const curChecked2 = (list: Array<any>) => {
  selectedList.list2 = list
}

let total = computed(() => {
  return selectedList.list1.length + selectedList.list2.length
})

const toLeft = () => {
  if (!(selectedList.list1.length || selectedList.list2.length)) return ElMessage.warning('请选择要移动的选项')
  if (selectedList.list1.length) {
    selectedList.list1.forEach((id, i) => {
      rightData.user1.forEach((item, index) => {
        if (item.id == id) {
          item.disabled = false
          rightData.user1.splice(index, 1)
        }
      })
    })
  }
  if (selectedList.list2.length) {
    selectedList.list2.forEach((id, i) => {
      rightData.user2.forEach((item, index) => {
        if (item.id == id) {
          item.disabled = false
          rightData.user2.splice(index, 1)
        }
      })
    })
  }
}

onMounted(() => {
  getOptions()
})

const open = () => {
  treeData.visible = true
}

defineExpose({ open })
</script>

<style lang="less" scoped>
.add-inner-user {
  .type-select {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .flag {
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid #409EFF;
    color: #409EFF;
    margin-left: 10px;
  }

  .title1 {
    margin-bottom: 5px;
  }

  .user-transfer {
    display: flex;
    align-items: center;

    .transfer-area {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 500px;

      .transfer-area-title {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #D6E5F5;
      }

      .transfer-area-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        border: 1px solid #f3f3f3;
        overflow: hidden;

        .transfer-area-filter {
          margin-top: 10px;
          width: 100%;
          padding: 0 10px;
          box-sizing: border-box;

          &>* {
            width: 100%;
          }
        }

        .transfer-area-list {
          flex: 1;
          margin: 10px 0;
          padding: 0 10px;
          overflow: auto;

          & .group-user-select:not(:last-child):after {
            content: '';
            display: block;
            border-bottom: 1px solid #dbe7f6;
            margin: 20px 5px;
          }
        }

        .selected-total {
          border-top: 1px solid #bee6ff;
          padding: 10px;

          .selected-total-num {
            font-size: 16px;
            color: #2d8cf0;
          }
        }
      }


    }

    .transfer-operate {
      width: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      & button {
        width: 40px;
        margin-left: 0;
        margin-bottom: 10px;
      }
    }
  }

}

//::v-deep .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
//  display: inline-block !important;
//}
//
//::v-deep .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
//  display: none !important;
//}

::v-deep :not(.is-leaf)+.is-disabled {
  display: none !important;
}
</style>
